<template>
  <div class="product-card">
    <!-- 商品图片和标签 -->
    <div class="product-image">
      <img :src="product.image" :alt="product.name" />
      <div v-if="product.discount" class="discount-tag">
        {{ product.discount }}% OFF
      </div>
      <div class="product-tags">
        <span 
          v-for="tag in product.tags" 
          :key="tag"
          class="tag"
        >
          {{ tag }}
        </span>
      </div>
    </div>
    
    <!-- 商品信息 -->
    <div class="product-info">
      <h3 class="product-name">{{ product.name }}</h3>
      
      <!-- 价格 -->
      <div class="price-section">
        <span class="current-price">¥{{ product.price }}</span>
        <span v-if="product.originalPrice" class="original-price">
          ¥{{ product.originalPrice }}
        </span>
      </div>
      
      <!-- 颜色和容量 -->
      <div class="product-options">
        <div class="colors">
          <span 
            v-for="color in product.colors" 
            :key="color"
            class="color-option"
          >
            {{ color }}
          </span>
        </div>
        <div class="storage">
          <span 
            v-for="storage in product.storage" 
            :key="storage"
            class="storage-option"
          >
            {{ storage }}
          </span>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button 
          type="primary" 
          size="small" 
          @click="$emit('add-to-cart', product)"
        >
          加入购物车
        </el-button>
        <el-button 
          size="small" 
          @click="$emit('view-detail', product)"
        >
          查看详情
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  product: {
    type: Object,
    required: true
  }
})

defineEmits(['add-to-cart', 'view-detail'])
</script>

<style scoped>
.product-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.product-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discount-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #ff4757;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.product-tags {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tag {
  background: rgba(215, 0, 15, 0.9);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
}

.product-info {
  padding: 20px;
}

.product-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.4;
}

.price-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.current-price {
  font-size: 20px;
  font-weight: bold;
  color: #d7000f;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}

.product-options {
  margin-bottom: 15px;
}

.colors, .storage {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

.color-option, .storage-option {
  font-size: 11px;
  color: #666;
  background: #f8f9fa;
  padding: 2px 6px;
  border-radius: 3px;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.action-buttons .el-button {
  flex: 1;
}
</style>